Design System Demo

Centralized design tokens converted to Tailwind utilities. All colors, typography, and patterns in one place.

Typography Scale

text-h1

110px / 110px line-height / 400 weight

Heading 1

text-h2

80px / 88px line-height / 400 weight

Heading 2

text-h3

40px / normal / 400 weight

Heading 3

text-h4

42px / normal / 400 weight

Heading 4

text-h5

32px / normal / 400 weight

Heading 5

text-button

22px / 32px / 0.11px letter-spacing / 400 weight

Button Text Style

text-body

26px / 40px line-height / 400 weight

This is body text using the text-body class. Perfect for paragraphs and long-form content. The line height is optimized for readability at 40px.

Color Palette

Blue Variants

blue-basic

Uses: bg-blue-basic

Primary brand color

blue-royal

Uses: bg-blue-royal

Dark headings

blue-light

Uses: bg-blue-light

Light backgrounds

blue-middle

Uses: bg-blue-middle

Medium accents

Neutrals

white-clearer

Uses: bg-white-clearer

Clearest white

white

Uses: bg-white

Standard white

gray-super-clear

Uses: bg-gray-super-clear

Very light gray

gray-clear

Uses: bg-gray-clear

Borders/dividers

gray

Uses: bg-gray

Body text

Accent Colors

purple

Uses: bg-purple

Purple accents

Special: Gradient

bg-purple-gradient

Semi-transparent purple background for subtle sections

Button Patterns

Primary Variant

As Button (onClick)

Disabled State

Secondary Variant

As Button (onClick)

Disabled State

Card Components

Standard Card

White background with subtle border and shadow. Perfect for content sections.

Light Blue Card

Light blue background for highlighting important information.

Gradient Card

Subtle purple gradient creates modern, airy feel.

Common Use Cases

Hero Section CTA

Large typography with brand colors for impact

Welcome to Our Platform

Experience the power of consistent design with our comprehensive design system

Get Started

Typography in Content

Combining heading levels with body text

Section Heading

Perfect spacing and typography for readable content. The text-body class provides optimal line height and sizing for long-form content.

Use semantic color names like text-gray and bg-blue-light for consistency across your entire application.

Color Combinations

Common background and text pairings

Primary Background

bg-blue-basic + text-white

Light Background

bg-blue-light + text-blue-royal

Gradient Background

bg-purple-gradient + text-gray

White Background

bg-white + text-blue-basic

Button Groups

Primary and secondary actions together

Primary ActionSecondary Action

Feature Grid

Cards with consistent styling

Feature 1

Consistent card design using design system tokens for unified appearance.

Feature 2

Consistent card design using design system tokens for unified appearance.

Feature 3

Consistent card design using design system tokens for unified appearance.

Code Examples

// Typography Classes
<h1 className="text-h1 text-blue-royal">Main Title</h1>
<h2 className="text-h2 text-blue-basic">Section Title</h2>
<h3 className="text-h3 text-gray">Subheading</h3>
<p className="text-body text-gray">Body content</p>
<button className="text-button">Button text</button>

// Color Utilities (works with bg-, text-, border- prefixes)
<div className="bg-blue-basic text-white">Primary</div>
<div className="bg-blue-light text-blue-royal">Light</div>
<div className="bg-blue-middle text-gray">Medium</div>
<p className="text-gray">Body text</p>
<div className="border-gray-clear">Subtle border</div>

// Special Gradient Background
<section className="bg-purple-gradient">
  Semi-transparent purple background
</section>

// Button Patterns
<button className="bg-blue-basic text-white-clearer px-8 py-4 
                   text-button rounded-full hover:bg-blue-royal 
                   transition-colors">
  Primary Action
</button>

<button className="bg-white text-blue-basic border-2 
                   border-blue-basic px-8 py-4 text-button 
                   rounded-full hover:bg-blue-light 
                   transition-colors">
  Secondary Action
</button>

// Card Component
<div className="bg-white rounded-xl shadow-md p-8">
  <h3 className="text-h5 text-blue-basic mb-4">Card Title</h3>
  <p className="text-body text-gray">Card description</p>
</div>

// Combining Multiple Utilities
<h2 className="text-h2 text-blue-royal mb-6">
  Heading with color and spacing
</h2>

<div className="bg-blue-light p-8 rounded-lg border border-blue-middle">
  <p className="text-body text-gray">
    Multiple design tokens working together
  </p>
</div>

Design System Status: ✅ Production Ready

All tokens centralized in tailwind.config.ts

-->